<!-- 短信白名单 -->
<template>
	<div id="smsWhiteList">
		<a-card :bordered="false">
			<a-form ref="searchFormRef" :model="searchFormState">
				<a-row :gutter="24">
					<a-col :span="6">
						<a-form-item label="产品名称" name="productCode">
							<a-select
								v-model:value="searchFormState.productCode"
								placeholder="请选择产品"
								:options="productList"
								@change="changeProduct"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="当前月份" name="currentMonth">
							<a-date-picker
								style="width: 100%"
								v-model:value="searchFormState.currentMonth"
								picker="month"
								allow-clear
								valueFormat="YYYY-MM"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="手机号" name="phone">
							<a-input v-model:value="searchFormState.phone" placeholder="请输入手机号" />
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-space>
							<a-button type="primary" @click="pageList(1)">查询</a-button>
							<a-button class="ml-3" @click="reset">重置</a-button>
						</a-space>
					</a-col>
				</a-row>
			</a-form>
		</a-card>
		<a-card :bordered="false" class="mt-2">
			<div class="opration mb-4">
				<div class="Btn">
					<a-button type="primary" @click="formRef.onOpen()">
						<upload-outlined />
						导入
					</a-button>
				</div>
			</div>
			<a-table
				ref="tableRef"
				:columns="columns"
				:data-source="pageListData"
				bordered
				:scroll="{ x: 'max-content' }"
				:pagination="pagination"
				@change="handleTableChange"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'action'">
						<a-space>
							<!-- <a-button type="link" size="small" @click="formRef.onOpen(record)">修改 </a-button> -->
							<a-popconfirm title="确定要删除吗？" @confirm="deleteWhiteItem(record.id)">
								<a-button type="link" danger size="small">删除</a-button>
							</a-popconfirm>
						</a-space>
					</template>
				</template>
			</a-table>
		</a-card>

		<!-- 新增/修改弹窗 -->
		<Form ref="formRef" @successful="refreshTable" :productList="productList" />
	</div>
</template>
<script setup name="smsWhiteList">
	import { onMounted } from 'vue'
	import bizSmsWhiteListApi from '@/api/biz/bizSmsWhiteListApi.js'
	import productApi from '@/api/tjzy/product/productApi'
	import Form from '@/views/biz/whitelist/form.vue'
	import { message } from 'ant-design-vue'

	// ===========================================DATA======================================================
	let pagination = ref({
		current: 1, // 当前页码
		pageSize: 10, // 每页条数
		total: 0, // 数据总量
		showSizeChanger: true, // 是否可以改变每页数量
		pageSizeOptions: ['10', '20', '50', '100'],
		showQuickJumper: true, // 是否可以快速跳转至某页
		showTotal: (total, range) => {
			return `${range[0]}-${range[1]} 共 ${total} 条 `
		}
	})
	let tableRef = ref()
	let searchFormRef = ref()
	let formRef = ref()

	const columns = [
		{
			title: '产品名称',
			dataIndex: 'productName'
		},
		{
			title: '当前月份',
			dataIndex: 'currentMonth'
		},
		{
			title: '手机号',
			dataIndex: 'phone'
		},
		{
			title: '操作',
			dataIndex: 'action',
			width: 150
		}
	]
	let searchFormState = ref({
		current: pagination.value.current,
		size: pagination.value.pageSize,
		productName: null,
		productCode: null,
		currentMonth: null,
		phone: null
	})
	let pageListData = ref([])
	let productList = ref([])
	// ===========================================DATA======================================================
	// ===========================================WATCH=====================================================
	// ===========================================LIFECYCLE HOOKS===========================================
	onMounted(() => {
		pageList(pagination.value.current)
		// 获取产品列表
		productApi.listAllProduct('', false).then((res) => {
			productList.value = res
		})
	})
	// ===========================================METHODS==================================================
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		pageList(1)
	}
	// 删除
	const deleteWhiteItem = (id) => {
		bizSmsWhiteListApi.delete(id).then(() => {
			refreshTable()
			message.success('删除成功')
		})
	}
	//列表刷新
	const refreshTable = () => {
		pageList(1)
	}
	// 分页
	const handleTableChange = (page, filters, sorter, extra) => {
		pagination.value.current = page.current
		pagination.value.pageSize = page.pageSize
		pageList(page.current)
	}
	const changeProduct = (value) => {
		searchFormState.value.productName = productList.value.find((item) => item.value === value).label
	}
	// ===========================================REQUEST==================================================
	//请求分页列表数据
	const pageList = (current) => {
		const params = {
			current: current,
			size: pagination.value.pageSize,
			productName: searchFormState.value.productName,
			currentMonth: searchFormState.value.currentMonth,
			phone: searchFormState.value.phone
		}
		bizSmsWhiteListApi.pageList(params).then((res) => {
			pageListData.value = res.records
			pagination.value.total = res.total
			pagination.value.current = res.current
			pagination.value.pageSize = res.size
		})
	}
</script>
<style lang="less" scoped></style>
